<script lang="ts">
export default {
  name: "user_info",
}
</script>

<script setup lang="ts">
import {ElFormItem, ElMessage, ElMessageBox, FormInstance, UploadRequestOptions} from "element-plus";
import {EducationInfo, PersonalSkill, ProjectInfo, Userinfo, WorkInfo} from "@/assets/ts/userinfo";
import {country_info} from "@/assets/ts/country_info";
import {ChineseRegionData, Ethnic} from "@/assets/ts/chinese_city_info";
import {clearUserInformation, getUserInformation, postUserInformation} from "@/http/m_api/user";

interface Props {
  card?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  card: false,
})

const countries = country_info.sort((l, n) => {
  return l.label.localeCompare(n.label, 'zh');
});
const formRef = ref<FormInstance>()
const userInfo = ref()

const loadUserInformation = async () => {
  const data = await getUserInformation()
  if (data.message) {
    userInfo.value = JSON.parse(data.message)
  } else {
    userInfo.value = new Userinfo()
  }
}

loadUserInformation()

const analyseVisible = ref(false)
const analyseProgress = ref(0)
const analyseFinished = ref(false)

const rule = (message: string, changeTri = false) => {
  return {
    required: true,
    message: message,
    trigger: changeTri ? ['blur', 'change'] : 'blur'
  }
}

const cleanTag = () => {
  if (!userInfo.value.JobIntention) return
  for (let i = 0; i < userInfo.value.JobIntention.length; i++) {
    let str = userInfo.value.JobIntention[i].replace(/[^\w\s\u4e00-\u9fa5]/g, '');
    str.trim()
    str = str.replace(/\s/g, ' ')
    userInfo.value.JobIntention[i] = str
  }
}

const checkPhoneNumber = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入电话号码'))
  }

  if (!Number.isInteger(value)) {
    if (value.includes('-') || value.includes('+') || value.includes('.')) {
      callback(new Error('请输入正确的电话号码'))
    }
  }
  return callback()
}

const checkEndDate = (formEl: FormInstance | undefined, index: number) => {
  if (!formEl) return
  formEl.validateField([`ProjectExp.${index}.endDate`], (valid) => {})
}

const shortcutsEduMonth = [
  {
    text: "当前大二下",
    value: () => {
      const end = new Date();
      end.setFullYear(end.getFullYear() + 2);
      end.setMonth(5);
      const start = new Date();
      start.setFullYear(start.getFullYear() - 2);
      start.setMonth(8);
      return [start, end];
    }
  },
  {
    text: "当前大三上",
    value: () => {
      const end = new Date();
      end.setFullYear(end.getFullYear() + 2);
      end.setMonth(5);
      const start = new Date();
      start.setFullYear(start.getFullYear() - 2);
      start.setMonth(8);
      return [start, end];
    }
  },
  {
    text: "当前大三下",
    value: () => {
      const end = new Date();
      end.setFullYear(end.getFullYear() + 1);
      end.setMonth(5);
      const start = new Date();
      start.setFullYear(start.getFullYear() - 3);
      start.setMonth(8);
      return [start, end];
    }
  },
  {
    text: "当前大四上",
    value: () => {
      const end = new Date();
      end.setFullYear(end.getFullYear() + 1);
      end.setMonth(5);
      const start = new Date();
      start.setFullYear(start.getFullYear() - 3);
      start.setMonth(8);
      return [start, end];
    }
  },
  {
    text: "当前大四下",
    value: () => {
      const end = new Date();
      end.setFullYear(end.getFullYear());
      end.setMonth(5);
      const start = new Date();
      start.setFullYear(start.getFullYear() - 4);
      start.setMonth(8);
      return [start, end];
    }
  },
]

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) {
    if (!formRef.value) return;
    formEl = formRef.value
  }
  formEl.validate((valid) => {
    if (valid) {
      saveForm()
      emit('confirm', true)
    } else {
      ElMessage({
        type: 'error',
        message: '有未完成的必填项！',
        duration: 4000
      })
      emit('confirm', false)
    }
  })
}

const emit = defineEmits(['confirm'])

const clearForm = (formEl: FormInstance | undefined) => {
  if (!formEl) {
    if (!formRef.value) return;
    formEl = formRef.value
  }
  ElMessageBox.confirm(
      '确认清空吗？您的个人信息将被全部删除',
      '注意！',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'error',
      }
  )
      .then(() => {
        ElMessage({
          type: 'success',
          message: '清空完成，点击保存以应用更改',
        })
        confirmClear()
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消成功',
        })
      })
}

const confirmClear = () => {
  userInfo.value = new Userinfo()
  clearUserInformation()
}

const saveForm = () => {
  postUserInformation(JSON.stringify(userInfo.value));
  ElMessage({
    type: 'success',
    message: '保存成功'
  })
}

defineExpose({submitForm, userInfo})
</script>

<template>
  <div class="user-info-container" v-if="userInfo">
    <!-- Header -->
    <div class="form-header">
      <h2 class="form-title">
        <i class="fas fa-user-edit"></i>
        个人信息填写
      </h2>
      <p class="form-subtitle">完善您的个人信息，打造专业简历</p>
    </div>

    <el-form ref="formRef" :model="userInfo" class="custom-form">

      <!-- Personal Information Section -->
      <div class="form-section">
        <div class="section-header">
          <h3 class="section-title">
            <i class="fas fa-user"></i>
            个人信息
          </h3>
        </div>
        <div class="section-content">
          <div class="form-grid">
            <div class="form-item">
              <label class="form-label required">姓名</label>
              <el-form-item :rules="[rule('请输入姓名')]" prop="name">
                <el-input v-model="userInfo.name" placeholder="请输入姓名" class="custom-input"/>
              </el-form-item>
            </div>
            <div class="form-item">
              <label class="form-label">花名/昵称</label>
              <el-form-item>
                <el-input v-model="userInfo.nickname" placeholder="请输入昵称" class="custom-input"/>
              </el-form-item>
            </div>
            <div class="form-item">
              <label class="form-label required">性别</label>
              <el-form-item :rules="[rule('请选择性别')]" prop="sex">
                <el-select v-model="userInfo.sex" placeholder="请选择性别" class="custom-select">
                  <el-option label="男" value="男"/>
                  <el-option label="女" value="女"/>
                  <el-option label="保密" value="保密"/>
                </el-select>
              </el-form-item>
            </div>
            <div class="form-item">
              <label class="form-label required">联系电话</label>
              <el-form-item :rules="[{validator: checkPhoneNumber, trigger:['blur','change']}]" prop="phoneNumber">
                <el-input
                    v-model="userInfo.phoneNumber"
                    placeholder="请输入电话号码"
                    class="custom-input-prepend"
                >
                  <template #prepend>
                    <el-select v-model="userInfo.phonePre" placeholder="选择" style="width: 120px" class="phone-select">
                      <el-option
                          v-for="(item, key) in countries"
                          :key="key"
                          :label="`+${item.callingCode}(${item.label})`"
                          :value="item"
                      />
                    </el-select>
                  </template>
                </el-input>
              </el-form-item>
            </div>
            <div class="form-item">
              <label class="form-label required">邮箱</label>
              <el-form-item :rules="[
                rule('请输入邮箱'),
                {
                  type: 'email',
                  message: '请输入正确的邮箱',
                  trigger: ['blur', 'change'],
                },
              ]" prop="email">
                <el-input v-model="userInfo.email" placeholder="请输入邮箱" class="custom-input"/>
              </el-form-item>
            </div>
            <div class="form-item">
              <label class="form-label required">出生日期</label>
              <el-form-item :rules="[rule('请选择出生日期')]" prop="birthdate">
                <el-date-picker
                    v-model="userInfo.birthdate"
                    type="date"
                    placeholder="请选择出生日期"
                    class="custom-date-picker"
                />
              </el-form-item>
            </div>
            <div class="form-item">
              <label class="form-label required">国籍</label>
              <el-form-item :rules="[rule('请选择国籍')]" prop="country">
                <el-select v-model="userInfo.country" placeholder="请选择国籍" class="custom-select">
                  <el-option
                      v-for="(item, key) in countries"
                      :key="key"
                      :label="item.label"
                      :value="item"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="form-item">
              <label class="form-label">现居地</label>
              <el-form-item>
                <el-cascader
                    v-model="userInfo.location"
                    placeholder="请选择现居地"
                    :options="ChineseRegionData"
                    class="custom-cascader"
                />
              </el-form-item>
            </div>
            <div class="form-item">
              <label class="form-label required">籍贯</label>
              <el-form-item :rules="[rule('请选择籍贯', true)]" prop="nativePlace">
                <el-cascader
                    v-model="userInfo.nativePlace"
                    placeholder="请选择籍贯"
                    :options="ChineseRegionData"
                    class="custom-cascader"
                />
              </el-form-item>
            </div>
            <div class="form-item">
              <label class="form-label">民族</label>
              <el-form-item>
                <el-select v-model="userInfo.ethnic" placeholder="请选择民族" class="custom-select">
                  <el-option
                      v-for="(item, key) in Ethnic"
                      :key="key"
                      :label="item.label"
                      :value="item.label"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="form-item">
              <label class="form-label">IM</label>
              <el-form-item>
                <el-input
                    v-model="userInfo.imNumber"
                    placeholder="请输入IM号码"
                    class="custom-input-prepend"
                >
                  <template #prepend>
                    <el-select v-model="userInfo.imChoice" placeholder="选择" style="width: 80px">
                      <el-option label="QQ" value="QQ"/>
                      <el-option label="微信" value="微信"/>
                    </el-select>
                  </template>
                </el-input>
              </el-form-item>
            </div>
          </div>
        </div>
      </div>

      <!-- Education Section -->
      <div class="form-section">
        <div class="section-header">
          <h3 class="section-title">
            <i class="fas fa-graduation-cap"></i>
            教育背景
          </h3>
        </div>
        <div class="section-content">
          <div class="experience-list">
            <div v-for="(item, index) in userInfo.EducationExp" :key="index" class="experience-card">
              <div class="card-header">
                <span class="card-number">{{ index + 1 }}</span>
                <div class="card-actions">
                  <el-button
                      v-if="index === userInfo.EducationExp.length - 1"
                      type="primary"
                      size="small"
                      class="add-btn"
                      @click="userInfo.EducationExp.push(new EducationInfo())"
                  >
                    <i class="fas fa-plus"></i>
                    添加
                  </el-button>
                  <el-button
                      type="danger"
                      size="small"
                      class="remove-btn"
                      :disabled="index === 0"
                      @click="userInfo.EducationExp.splice(index,1)"
                  >
                    <i class="fas fa-trash"></i>
                    删除
                  </el-button>
                </div>
              </div>
              <div class="card-content">
                <div class="form-grid">
                  <div class="form-item">
                    <label class="form-label required">学历</label>
                    <el-form-item :rules="[rule('请选择学历')]" :prop="`EducationExp.${index}.degree`">
                      <el-select v-model="item.degree" placeholder="请选择学历" class="custom-select">
                        <el-option label="高中" value="高中"/>
                        <el-option label="专科" value="专科"/>
                        <el-option label="本科" value="本科"/>
                        <el-option label="硕士研究生" value="硕士研究生"/>
                        <el-option label="博士研究生" value="博士研究生"/>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div class="form-item">
                    <label class="form-label required">学校名称</label>
                    <el-form-item :rules="[rule('请输入学校名称')]" :prop="`EducationExp.${index}.schoolName`">
                      <el-input v-model="item.schoolName" placeholder="请输入学校名称" class="custom-input"/>
                    </el-form-item>
                  </div>
                  <div class="form-item">
                    <label class="form-label required">起止时间</label>
                    <el-form-item :rules="[rule('请完善起止时间')]" :prop="`EducationExp.${index}.date`">
                      <el-date-picker
                          v-model="item.date"
                          type="monthrange"
                          unlink-panels
                          range-separator="至"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                          :shortcuts="shortcutsEduMonth"
                          class="custom-date-picker"
                      />
                    </el-form-item>
                  </div>
                  <div class="form-item">
                    <label class="form-label">学校所在地</label>
                    <el-form-item>
                      <el-cascader
                          v-model="item.schoolLocation"
                          placeholder="请选择学校所在地"
                          :options="ChineseRegionData"
                          class="custom-cascader"
                      />
                    </el-form-item>
                  </div>
                  <div class="form-item">
                    <label class="form-label required">专业名称</label>
                    <el-form-item :rules="[rule('请输入专业名称')]" :prop="`EducationExp.${index}.subject`">
                      <el-input v-model="item.subject" placeholder="请输入专业名称" class="custom-input"/>
                    </el-form-item>
                  </div>
                  <div class="form-item">
                    <label class="form-label required">学习形式</label>
                    <el-form-item>
                      <el-radio-group v-model="item.type" class="custom-radio-group">
                        <el-radio :value="0">全日制</el-radio>
                        <el-radio :value="1">非全日制</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Work Experience Section -->
      <div class="form-section">
        <div class="section-header">
          <h3 class="section-title">
            <i class="fas fa-briefcase"></i>
            工作经历
          </h3>
        </div>
        <div class="section-content">
          <div v-if="userInfo.WorkExp.length === 0" class="empty-section">
            <div class="empty-content">
              <i class="fas fa-briefcase empty-icon"></i>
              <p class="empty-text">暂无工作经历</p>
              <el-button type="primary" class="add-first-btn" @click="userInfo.WorkExp.push(new WorkInfo())">
                <i class="fas fa-plus"></i>
                添加工作经历
              </el-button>
            </div>
          </div>
          <div v-else class="experience-list">
            <div v-for="(item, index) in userInfo.WorkExp" :key="index" class="experience-card">
              <div class="card-header">
                <span class="card-number">{{ index + 1 }}</span>
                <div class="card-actions">
                  <el-button
                      v-if="index === userInfo.WorkExp.length - 1"
                      type="primary"
                      size="small"
                      class="add-btn"
                      @click="userInfo.WorkExp.push(new WorkInfo())"
                  >
                    <i class="fas fa-plus"></i>
                    添加
                  </el-button>
                  <el-button
                      type="danger"
                      size="small"
                      class="remove-btn"
                      @click="userInfo.WorkExp.splice(index,1)"
                  >
                    <i class="fas fa-trash"></i>
                    删除
                  </el-button>
                </div>
              </div>
              <div class="card-content">
                <div class="form-grid">
                  <div class="form-item">
                    <label class="form-label required">起止时间</label>
                    <el-form-item :rules="[rule('请完善起止时间')]" :prop="`WorkExp.${index}.date`">
                      <el-date-picker
                          v-model="item.date"
                          type="monthrange"
                          unlink-panels
                          range-separator="至"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                          class="custom-date-picker"
                      />
                    </el-form-item>
                  </div>
                  <div class="form-item">
                    <label class="form-label required">公司名称</label>
                    <el-form-item :rules="[rule('请填写公司名称')]" :prop="`WorkExp.${index}.companyName`">
                      <el-input v-model="item.companyName" placeholder="请输入公司名称" class="custom-input"/>
                    </el-form-item>
                  </div>
                  <div class="form-item">
                    <label class="form-label">所在行业</label>
                    <el-form-item>
                      <el-input v-model="item.industry" placeholder="请输入所在行业" class="custom-input"/>
                    </el-form-item>
                  </div>
                  <div class="form-item">
                    <label class="form-label">工作地点</label>
                    <el-form-item>
                      <el-cascader
                          v-model="item.companyLocation"
                          placeholder="请选择工作地点"
                          :options="ChineseRegionData"
                          class="custom-cascader"
                      />
                    </el-form-item>
                  </div>
                  <div class="form-item">
                    <label class="form-label">职位名称</label>
                    <el-form-item>
                      <el-input v-model="item.jobName" placeholder="请输入职位名称" class="custom-input"/>
                    </el-form-item>
                  </div>
                  <div class="form-item full-width">
                    <label class="form-label">工作职责</label>
                    <el-form-item>
                      <el-input
                          v-model="item.jobDuty"
                          placeholder="请输入工作职责"
                          type="textarea"
                          :rows="3"
                          class="custom-textarea"
                      />
                    </el-form-item>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Project Experience Section -->
      <div class="form-section">
        <div class="section-header">
          <h3 class="section-title">
            <i class="fas fa-project-diagram"></i>
            项目经历
          </h3>
        </div>
        <div class="section-content">
          <div v-if="userInfo.ProjectExp.length === 0" class="empty-section">
            <div class="empty-content">
              <i class="fas fa-project-diagram empty-icon"></i>
              <p class="empty-text">暂无项目经历</p>
              <el-button type="primary" class="add-first-btn" @click="userInfo.ProjectExp.push(new ProjectInfo())">
                <i class="fas fa-plus"></i>
                添加项目经历
              </el-button>
            </div>
          </div>
          <div v-else class="experience-list">
            <div v-for="(item, index) in userInfo.ProjectExp" :key="index" class="experience-card">
              <div class="card-header">
                <span class="card-number">{{ index + 1 }}</span>
                <div class="card-actions">
                  <el-button
                      v-if="index === userInfo.ProjectExp.length - 1"
                      type="primary"
                      size="small"
                      class="add-btn"
                      @click="userInfo.ProjectExp.push(new ProjectInfo())"
                  >
                    <i class="fas fa-plus"></i>
                    添加
                  </el-button>
                  <el-button
                      type="danger"
                      size="small"
                      class="remove-btn"
                      @click="userInfo.ProjectExp.splice(index,1)"
                  >
                    <i class="fas fa-trash"></i>
                    删除
                  </el-button>
                </div>
              </div>
              <div class="card-content">
                <div class="form-grid">
                  <div class="form-item">
                    <label class="form-label required">起止时间</label>
                    <div class="date-range-container">
                      <el-form-item :rules="[rule('请填入开始时间')]" :prop="`ProjectExp.${index}.startDate`" style="width: 30%">
                        <el-date-picker
                            v-model="item.startDate"
                            type="month"
                            placeholder="开始时间"
                            class="custom-date-picker"
                        />
                      </el-form-item>
                      <span class="date-separator">~</span>
                      <el-form-item :rules="[{
                        validator: (rule: any, value: any, callback: any)=>{
                          if(!value && !item.tillNow) return callback(new Error('请填入结束时间'))
                          return callback()
                        },
                        trigger:['blur','change']
                      }]" :prop="`ProjectExp.${index}.endDate`" style="width: 30%;">
                        <el-date-picker
                            v-model="item.endDate"
                            type="month"
                            placeholder="结束时间"
                            class="custom-date-picker"
                        />
                      </el-form-item>
                      <div class="till-now-switch">
                        <el-switch v-model="item.tillNow" @change="checkEndDate(formRef, index)"/>
                        <span>至今</span>
                      </div>
                    </div>
                  </div>
                  <div class="form-item">
                    <label class="form-label required">项目名称</label>
                    <el-form-item :rules="[rule('请填写项目名称')]" :prop="`ProjectExp.${index}.projectName`">
                      <el-input v-model="item.projectName" placeholder="请输入项目名称" class="custom-input"/>
                    </el-form-item>
                  </div>
                  <div class="form-item">
                    <label class="form-label">职务</label>
                    <el-form-item>
                      <el-input v-model="item.job" placeholder="请输入职务" class="custom-input"/>
                    </el-form-item>
                  </div>
                  <div class="form-item full-width">
                    <label class="form-label required">项目描述</label>
                    <el-form-item :rules="[rule('请填写项目描述')]" :prop="`ProjectExp.${index}.projectDescription`">
                      <el-input
                          v-model="item.projectDescription"
                          placeholder="请输入项目描述"
                          type="textarea"
                          :rows="3"
                          class="custom-textarea"
                      />
                    </el-form-item>
                  </div>
                  <div class="form-item full-width">
                    <label class="form-label">项目职责</label>
                    <el-form-item>
                      <el-input
                          v-model="item.jobDuty"
                          placeholder="请输入项目职责"
                          type="textarea"
                          :rows="3"
                          class="custom-textarea"
                      />
                    </el-form-item>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Personal Skills Section -->
      <div class="form-section">
        <div class="section-header">
          <h3 class="section-title">
            <i class="fas fa-cogs"></i>
            个人技能
          </h3>
        </div>
        <div class="section-content">
          <div v-if="userInfo.PersonalSkills.length === 0" class="empty-section">
            <div class="empty-content">
              <i class="fas fa-cogs empty-icon"></i>
              <p class="empty-text">暂无个人技能</p>
              <el-button type="primary" class="add-first-btn" @click="userInfo.PersonalSkills.push(new PersonalSkill())">
                <i class="fas fa-plus"></i>
                添加个人技能
              </el-button>
            </div>
          </div>
          <div v-else class="experience-list">
            <div v-for="(item, index) in userInfo.PersonalSkills" :key="index" class="experience-card">
              <div class="card-header">
                <span class="card-number">{{ index + 1 }}</span>
                <div class="card-actions">
                  <el-button
                      v-if="index === userInfo.PersonalSkills.length - 1"
                      type="primary"
                      size="small"
                      class="add-btn"
                      @click="userInfo.PersonalSkills.push(new PersonalSkill())"
                  >
                    <i class="fas fa-plus"></i>
                    添加
                  </el-button>
                  <el-button
                      type="danger"
                      size="small"
                      class="remove-btn"
                      @click="userInfo.PersonalSkills.splice(index,1)"
                  >
                    <i class="fas fa-trash"></i>
                    删除
                  </el-button>
                </div>
              </div>
              <div class="card-content">
                <div class="form-grid">
                  <div class="form-item">
                    <label class="form-label required">技能名称</label>
                    <el-form-item :rules="[rule('请输入名称')]" :prop="`PersonalSkills.${index}.name`">
                      <el-input v-model="item.name" placeholder="请输入技能名称" class="custom-input"/>
                    </el-form-item>
                  </div>
                  <div class="form-item">
                    <label class="form-label required">掌握程度</label>
                    <el-form-item :rules="[rule('请选择掌握程度')]" :prop="`PersonalSkills.${index}.degree`">
                      <el-select v-model="item.degree" placeholder="请选择掌握程度" class="custom-select">
                        <el-option label="了解" :value="0"/>
                        <el-option label="一般" :value="1"/>
                        <el-option label="熟练" :value="2"/>
                        <el-option label="精通" :value="3"/>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Job Intention Section -->
      <div class="form-section">
        <div class="section-header">
          <h3 class="section-title">
            <i class="fas fa-bullseye"></i>
            岗位意向
          </h3>
        </div>
        <div class="section-content">
          <div class="form-item full-width">
            <el-form-item>
              <el-input-tag
                  v-model="userInfo.JobIntention"
                  placeholder="请输入岗位意向，按回车添加"
                  aria-label="Please click the Enter key after input"
                  size="large"
                  delimiter=","
                  @change="cleanTag"
                  class="custom-input-tag"
              />
            </el-form-item>
          </div>
        </div>
      </div>

      <!-- Self Assessment Section -->
      <div class="form-section">
        <div class="section-header">
          <h3 class="section-title">
            <i class="fas fa-user-check"></i>
            个人评价
          </h3>
        </div>
        <div class="section-content">
          <div class="form-item full-width">
            <el-form-item>
              <el-input
                  v-model="userInfo.SelfAssessment"
                  placeholder="请输入个人评价"
                  type="textarea"
                  :rows="6"
                  class="custom-textarea"
              />
            </el-form-item>
          </div>
        </div>
      </div>

      <!-- Action Buttons -->
      <div class="form-actions">
        <el-button type="primary" size="large" class="save-btn" @click="submitForm(formRef)">
          <i class="fas fa-save"></i>
          保存信息
        </el-button>
        <el-button type="danger" size="large" class="clear-btn" @click="clearForm(formRef)">
          <i class="fas fa-trash-alt"></i>
          清空表单
        </el-button>
      </div>

      <!-- Navigation Link -->
      <div v-if="!props.card" class="form-footer">
        <router-link to="#" class="resume-link">
          <i class="fas fa-arrow-right"></i>
          点击前往简历制作
        </router-link>
      </div>
    </el-form>
  </div>

  <!-- Loading State -->
  <div v-else class="loading-container">
    <div class="loading-content">
      <i class="fas fa-spinner fa-spin loading-icon"></i>
      <p class="loading-text">正在加载用户信息...</p>
    </div>
  </div>

  <!-- Analysis Dialog -->
  <el-dialog
      v-model="analyseVisible"
      title="正在解析简历"
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      align-center
      class="custom-dialog"
  >
    <div class="analysis-content">
      <el-progress
          :percentage="analyseProgress"
          :status="analyseFinished ? 'success' : 'warning'"
          :stroke-width="8"
          class="custom-progress"
      />
      <p class="analysis-text">
        {{ analyseFinished ? '解析完成！' : '正在解析中，请耐心等待...' }}
      </p>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button
            v-if="analyseFinished"
            type="primary"
            @click="analyseVisible = false"
            class="finish-btn"
        >
          完成
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css';

.user-info-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
}

.form-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 30px;
  background: linear-gradient(135deg, rgba(100, 181, 246, 0.1), rgba(144, 202, 249, 0.05));
  border-radius: 16px;
  border: 1px solid rgba(100, 181, 246, 0.2);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(100, 181, 246, 0.1);

  .form-title {
    color: #2c3e50;
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    i {
      color: #64b5f6;
      font-size: 1.8rem;
    }
  }

  .form-subtitle {
    color: #5a6c7d;
    font-size: 1rem;
    margin: 0;
  }
}

.custom-form {
  .form-section {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(100, 181, 246, 0.15);
    border-radius: 16px;
    margin-bottom: 30px;
    overflow: hidden;
    transition: all 0.3s ease;
    animation: slideInUp 0.5s ease-out;
    box-shadow: 0 4px 20px rgba(100, 181, 246, 0.08);

    &:hover {
      border-color: rgba(100, 181, 246, 0.3);
      box-shadow: 0 8px 25px rgba(100, 181, 246, 0.15);
      transform: translateY(-2px);
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 30px;
      background: linear-gradient(135deg, rgba(100, 181, 246, 0.08), rgba(144, 202, 249, 0.05));
      border-bottom: 1px solid rgba(100, 181, 246, 0.1);

      .section-title {
        color: #2c3e50;
        font-size: 1.3rem;
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 12px;

        i {
          color: #64b5f6;
          font-size: 1.2rem;
        }
      }

      .section-tip {
        color: #5a6c7d;
        font-size: 0.9rem;
      }
    }

    .section-content {
      padding: 30px;
    }
  }
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  align-items: start;

  .form-item {
    display: flex;
    flex-direction: column;

    &.full-width {
      grid-column: 1 / -1;
    }

    .form-label {
      color: #2c3e50;
      font-size: 0.95rem;
      font-weight: 500;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 4px;

      &.required::before {
        content: '*';
        color: #e74c3c;
        font-weight: bold;
      }
    }
  }
}

// Custom Element Plus Styling
:deep(.custom-input) {
  .el-input__wrapper {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(100, 181, 246, 0.2) !important;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(100, 181, 246, 0.05) !important;

    &:hover {
      border-color: rgba(100, 181, 246, 0.4) !important;
      background: rgba(255, 255, 255, 0.95) !important;
      box-shadow: 0 4px 12px rgba(100, 181, 246, 0.1) !important;
    }

    &.is-focus {
      border-color: #64b5f6 !important;
      box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2) !important;
      background: rgba(255, 255, 255, 1) !important;
    }
  }

  .el-input__inner {
    color: #2c3e50 !important;
    font-size: 0.95rem;
    background: transparent !important;

    &::placeholder {
      color: #95a5a6 !important;
    }
  }
}

:deep(.custom-input-prepend) {
  .el-input__wrapper {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(100, 181, 246, 0.2) !important;
    border-radius: 0 8px 8px 0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(100, 181, 246, 0.05) !important;

    &:hover {
      border-color: rgba(100, 181, 246, 0.4) !important;
      background: rgba(255, 255, 255, 0.95) !important;
      box-shadow: 0 4px 12px rgba(100, 181, 246, 0.1) !important;
    }

    &.is-focus {
      border-color: #64b5f6 !important;
      box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2) !important;
      background: rgba(255, 255, 255, 1) !important;
    }
  }

  .el-input__inner {
    color: #2c3e50 !important;
    font-size: 0.95rem;
    background: transparent !important;

    &::placeholder {
      color: #95a5a6 !important;
    }
  }
}

:deep(.custom-select) {
  .el-select__wrapper {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(100, 181, 246, 0.2) !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(100, 181, 246, 0.05) !important;

    &:hover {
      border-color: rgba(100, 181, 246, 0.4) !important;
      background: rgba(255, 255, 255, 0.95) !important;
      box-shadow: 0 4px 12px rgba(100, 181, 246, 0.1) !important;
    }

    &.is-focused {
      border-color: #64b5f6 !important;
      box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2) !important;
      background: rgba(255, 255, 255, 1) !important;
    }
  }

  .el-select__selected-item {
    color: #2c3e50 !important;
  }

  .el-select__placeholder {
    color: #2c3e50 !important;
  }

  .el-select__suffix {
    color: #5a6c7d !important;
  }

  .el-select__input {
    color: #2c3e50 !important;
    background: transparent !important;
  }
}

:deep(.custom-textarea) {
  .el-textarea__inner {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(100, 181, 246, 0.2) !important;
    border-radius: 8px;
    color: #2c3e50 !important;
    resize: none;
    box-shadow: 0 2px 8px rgba(100, 181, 246, 0.05) !important;

    &::placeholder {
      color: #95a5a6 !important;
    }

    &:hover {
      border-color: rgba(100, 181, 246, 0.4) !important;
      background: rgba(255, 255, 255, 0.95) !important;
      box-shadow: 0 4px 12px rgba(100, 181, 246, 0.1) !important;
    }

    &:focus {
      border-color: #64b5f6 !important;
      box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2) !important;
      background: rgba(255, 255, 255, 1) !important;
    }
  }
}

:deep(.custom-date-picker) {
  .el-input__wrapper {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(100, 181, 246, 0.2) !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(100, 181, 246, 0.05) !important;

    &:hover {
      border-color: rgba(100, 181, 246, 0.4) !important;
      background: rgba(255, 255, 255, 0.95) !important;
      box-shadow: 0 4px 12px rgba(100, 181, 246, 0.1) !important;
    }

    &.is-focus {
      border-color: #64b5f6 !important;
      box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2) !important;
      background: rgba(255, 255, 255, 1) !important;
    }
  }

  .el-input__inner {
    color: #2c3e50 !important;
    background: transparent !important;

    &::placeholder {
      color: #95a5a6 !important;
    }
  }

  .el-input__suffix {
    color: #5a6c7d !important;
  }

  .el-range-separator {
    color: #2c3e50 !important;
  }

  .el-range-input {
    background: transparent !important;
    color: #2c3e50 !important;

    &::placeholder {
      color: #95a5a6 !important;
    }
  }
}

:deep(.custom-cascader) {
  .el-cascader {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(100, 181, 246, 0.2) !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(100, 181, 246, 0.05) !important;

    &:hover {
      border-color: rgba(100, 181, 246, 0.4) !important;
      background: rgba(255, 255, 255, 0.95) !important;
      box-shadow: 0 4px 12px rgba(100, 181, 246, 0.1) !important;
    }

    &.is-focus {
      border-color: #64b5f6 !important;
      box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2) !important;
      background: rgba(255, 255, 255, 1) !important;
    }
  }

  .el-cascader__tags {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(100, 181, 246, 0.2) !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(100, 181, 246, 0.05) !important;

    &:hover {
      border-color: rgba(100, 181, 246, 0.4) !important;
      background: rgba(255, 255, 255, 0.95) !important;
      box-shadow: 0 4px 12px rgba(100, 181, 246, 0.1) !important;
    }

    &.is-focus {
      border-color: #64b5f6 !important;
      box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2) !important;
      background: rgba(255, 255, 255, 1) !important;
    }
  }

  .el-cascader__label {
    color: #2c3e50 !important;
  }

  .el-cascader__placeholder {
    color: #95a5a6 !important;
  }

  .el-cascader__search-input {
    background: transparent !important;
    color: #2c3e50 !important;

    &::placeholder {
      color: #95a5a6 !important;
    }
  }

  .el-cascader__suffix {
    color: #5a6c7d !important;
  }
}

:deep(.custom-radio-group) {
  .el-radio {
    color: #2c3e50 !important;
    margin-right: 20px;

    .el-radio__label {
      color: #2c3e50 !important;
    }

    &.is-checked {
      .el-radio__label {
        color: #64b5f6 !important;
      }
    }
  }
}

:deep(.custom-input-tag) {
  .el-input-tag__wrapper {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(100, 181, 246, 0.2) !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(100, 181, 246, 0.05) !important;

    &:hover {
      border-color: rgba(100, 181, 246, 0.4) !important;
      background: rgba(255, 255, 255, 0.95) !important;
      box-shadow: 0 4px 12px rgba(100, 181, 246, 0.1) !important;
    }

    &.is-focus {
      border-color: #64b5f6 !important;
      box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2) !important;
      background: rgba(255, 255, 255, 1) !important;
    }
  }

  .el-input-tag__input {
    color: #2c3e50 !important;
    background: transparent !important;

    &::placeholder {
      color: #95a5a6 !important;
    }
  }

  .el-tag {
    background: rgba(100, 181, 246, 0.15) !important;
    border-color: rgba(100, 181, 246, 0.3) !important;
    color: #2c3e50 !important;
  }
}

// Additional fixes for phone select
:deep(.phone-select) {
  .el-select__wrapper {


    &:hover {
      background: rgba(255, 255, 255, 0.95) !important;
    }

    &.is-focused {
      background: rgba(255, 255, 255, 1) !important;
    }
  }

  .el-select__selected-item {
    color: #2c3e50 !important;
  }

  .el-select__suffix {
    color: #5a6c7d !important;
  }

  .el-select__placeholder {
    color: #2c3e50 !important;
  }
}

// Switch styling
:deep(.el-switch) {
  &.is-checked {
    .el-switch__core {
      background-color: #64b5f6 !important;
      border-color: #64b5f6 !important;
    }
  }

  .el-switch__core {
    background-color: rgba(100, 181, 246, 0.2) !important;
    border-color: rgba(100, 181, 246, 0.3) !important;
  }
}

// Form item styling
:deep(.el-form-item) {
  .el-form-item__error {
    color: #e74c3c !important;
  }
}

// Upload Styling
.custom-upload {
  :deep(.el-upload) {
    width: 100%;
  }

  :deep(.el-upload-dragger) {
    background: rgba(255, 255, 255, 0.6);
    border: 2px dashed rgba(100, 181, 246, 0.3);
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(100, 181, 246, 0.05);

    &:hover {
      border-color: #64b5f6;
      background: rgba(100, 181, 246, 0.05);
      box-shadow: 0 4px 12px rgba(100, 181, 246, 0.1);
    }
  }

  .upload-content {
    text-align: center;
    padding: 20px;

    .upload-icon {
      font-size: 3rem;
      color: #64b5f6;
      margin-bottom: 15px;
    }

    .upload-text {
      color: #2c3e50;
      font-size: 1rem;
      margin-bottom: 8px;

      em {
        color: #64b5f6;
        font-style: normal;
        font-weight: 600;
      }
    }

    .upload-hint {
      color: #5a6c7d;
      font-size: 0.85rem;
    }
  }
}

// Experience Cards
.experience-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.experience-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(100, 181, 246, 0.15);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(100, 181, 246, 0.05);

  &:hover {
    border-color: rgba(100, 181, 246, 0.3);
    box-shadow: 0 8px 25px rgba(100, 181, 246, 0.15);
    transform: translateY(-2px);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, rgba(100, 181, 246, 0.08), rgba(144, 202, 249, 0.05));
    border-bottom: 1px solid rgba(100, 181, 246, 0.1);

    .card-number {
      background: linear-gradient(135deg, #64b5f6, #42a5f5);
      color: white;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 0.9rem;
      box-shadow: 0 2px 8px rgba(100, 181, 246, 0.3);
    }

    .card-actions {
      display: flex;
      gap: 10px;

      .add-btn {
        background: linear-gradient(135deg, #64b5f6, #42a5f5);
        border: none;
        border-radius: 20px;
        padding: 6px 12px;
        font-size: 0.8rem;
        box-shadow: 0 2px 8px rgba(100, 181, 246, 0.2);

        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(100, 181, 246, 0.3);
        }
      }

      .remove-btn {
        background: linear-gradient(135deg, #e74c3c, #c0392b);
        border: none;
        border-radius: 20px;
        padding: 6px 12px;
        font-size: 0.8rem;
        box-shadow: 0 2px 8px rgba(231, 76, 60, 0.2);

        &:hover:not(:disabled) {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
        }

        &:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
      }
    }
  }

  .card-content {
    padding: 25px;
  }
}

// Date Range Container
.date-range-container {
  display: flex;
  align-items: start;
  gap: 10px;
  flex-wrap: wrap;

  .date-separator {
    color: #5a6c7d;
    font-weight: 500;
  }

  .till-now-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2c3e50;
    font-size: 0.9rem;
  }
}

// Empty Section
.empty-section {
  text-align: center;
  padding: 40px 20px;

  .empty-content {
    .empty-icon {
      font-size: 3rem;
      color: rgba(100, 181, 246, 0.4);
      margin-bottom: 15px;
    }

    .empty-text {
      color: #5a6c7d;
      font-size: 1rem;
      margin-bottom: 20px;
    }

    .add-first-btn {
      background: linear-gradient(135deg, #64b5f6, #42a5f5);
      border: none;
      border-radius: 25px;
      padding: 12px 24px;
      font-weight: 500;
      box-shadow: 0 4px 12px rgba(100, 181, 246, 0.2);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(100, 181, 246, 0.3);
      }
    }
  }
}

// Form Actions
.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 40px 0;
  padding: 30px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  border: 1px solid rgba(100, 181, 246, 0.15);
  box-shadow: 0 4px 20px rgba(100, 181, 246, 0.08);

  .save-btn {
    background: linear-gradient(135deg, #64b5f6, #42a5f5);
    border: none;
    border-radius: 25px;
    padding: 15px 40px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(100, 181, 246, 0.2);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(100, 181, 246, 0.3);
    }
  }

  .clear-btn {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border: none;
    border-radius: 25px;
    padding: 15px 40px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(231, 76, 60, 0.3);
    }
  }
}

// Form Footer
.form-footer {
  text-align: center;
  margin-top: 30px;

  .resume-link {
    color: #64b5f6;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;

    &:hover {
      color: #42a5f5;
      transform: translateX(5px);
    }
  }
}

// Loading State
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;

  .loading-content {
    text-align: center;

    .loading-icon {
      font-size: 3rem;
      color: #64b5f6;
      margin-bottom: 20px;
    }

    .loading-text {
      color: #2c3e50;
      font-size: 1.1rem;
    }
  }
}

:deep(.custom-dialog) {
  .el-dialog {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(100, 181, 246, 0.2);
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(100, 181, 246, 0.15);
  }

  .el-dialog__header {
    background: linear-gradient(135deg, rgba(100, 181, 246, 0.08), rgba(144, 202, 249, 0.05));
    border-bottom: 1px solid rgba(100, 181, 246, 0.1);

    .el-dialog__title {
      color: #2c3e50;
      font-weight: 600;
    }
  }

  .el-dialog__body {
    padding: 30px;
  }
}

.analysis-content {
  text-align: center;

  .custom-progress {
    margin-bottom: 20px;
  }

  .analysis-text {
    color: #2c3e50;
    font-size: 1rem;
    margin: 0;
  }
}

.finish-btn {
  background: linear-gradient(135deg, #64b5f6, #42a5f5);
  border: none;
  border-radius: 20px;
  padding: 10px 30px;
  box-shadow: 0 2px 8px rgba(100, 181, 246, 0.2);

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(100, 181, 246, 0.3);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// Responsive Design
@media (max-width: 768px) {
  .user-info-container {
    padding: 0 15px;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .form-actions {
    flex-direction: column;
    gap: 15px;

    .save-btn,
    .clear-btn {
      width: 100%;
    }
  }

  .date-range-container {
    flex-direction: column;
    align-items: stretch;

    .date-separator {
      text-align: center;
    }
  }

  .experience-card .card-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}

// Global styles for dropdown menus (light theme)



:deep(.el-autocomplete-suggestion) {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(100, 181, 246, 0.2) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 25px rgba(100, 181, 246, 0.15) !important;

  .el-autocomplete-suggestion__list {
    background: transparent !important;
  }

  .el-autocomplete-suggestion__item {
    color: #2c3e50 !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(100, 181, 246, 0.05) !important;

    &:hover {
      background: rgba(100, 181, 246, 0.1) !important;
      color: #2c3e50 !important;
    }

    &.is-highlighted {
      background: rgba(100, 181, 246, 0.15) !important;
      color: #2c3e50 !important;
    }

    &:last-child {
      border-bottom: none !important;
    }
  }

  .el-autocomplete-suggestion__empty {
    color: #5a6c7d !important;
  }
}

// Additional global styles for popper containers
:deep(.el-popper) {
  &.is-light {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(100, 181, 246, 0.2) !important;
    color: #2c3e50 !important;
  }

  .el-popper__arrow {
    &::before {
      border-color: rgba(100, 181, 246, 0.2) !important;
    }

    &::after {
      border-color: rgba(255, 255, 255, 0.95) !important;
    }
  }
}


// Scrollbar styling for dropdowns
:deep(.el-scrollbar) {
  .el-scrollbar__bar {
    &.is-vertical {
      .el-scrollbar__thumb {
        background: rgba(100, 181, 246, 0.3) !important;

        &:hover {
          background: rgba(100, 181, 246, 0.5) !important;
        }
      }
    }

    &.is-horizontal {
      .el-scrollbar__thumb {
        background: rgba(100, 181, 246, 0.3) !important;

        &:hover {
          background: rgba(100, 181, 246, 0.5) !important;
        }
      }
    }
  }
}
</style>